/* 方法一：position加margin */
/*.wrap {
  width: 200px;
  height: 200px;
  background: yellow;

  position: relative;
}
.wrap .center {
  width: 100px;
  height: 100px;
  background: green;

  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}*/
/* 兼容性：主流浏览器均支持，IE6不支持 */

/* 方法二： diaplay:table-cell */
/*.wrap {
  width: 200px;
  height: 200px;
  background: yellow;

  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.center {
  width: 100px;
  height: 100px;
  background: green;

  display: inline-block;
  vertical-align: middle;
}*/
/* 兼容性：由于display:table-cell的原因，IE6\7不兼容 */

/* 方法三：position加 transform */
/*.wrap {
  background: yellow;
  width: 200px;
  height: 200px;

  position: relative;
}
.center {
  width: 100px;
  height: 100px;
  background: green;

  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}*/
/* 兼容性：ie9以下不支持 transform，手机端表现的比较好 */

/* 方法四：flex;align-items: center;justify-content: center */
/*.wrap {
  background: yellow;
  width: 200px;
  height: 200px;

  display: flex; 
  align-items: center; 
  justify-content: center;
}
.center {
  background: green;
  width: 100px;
  height: 100px;
}*/
/* 移动端首选 */

/* 方法五：display:flex;margin:auto */
/*.wrap {
  background: yellow;
  width: 200px;
  height: 200px;

  display: flex; 
}
.center {
  background: green;
  width: 100px;
  height: 100px;

  margin: auto;
}*/
/* 移动端首选 */

/* 方法六：纯position */
.wrap {
  background: yellow;
  width: 200px;
  height: 200px;

  position: relative;
}
.center {
  background: green;
  width: 100px;
  height: 100px;

  position: absolute;
  left: 50px;
  top: 50px; 
}
/* 兼容性：适用于所有浏览器 */

/* 方法七：兼容低版本浏览器，不固定宽高 */
.table {
  height: 200px;
  width: 200px;
  background: yellow;

  display: table;
  position: relative;
  float: left;
}      
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;        
  *position: absolute;
  padding: 10px;
  *top: 50%;
  *left: 50%;
}
.content {
  background: green;

  *position:relative;
  *top: -50%;
  *left: -50%;
}